<template>
  <view class="exhibition-selector">
    <!-- 选择展览模式 -->
    <view class="select-mode">
      <view class="search-bar">
        <input 
          class="search-input" 
          v-model="searchKeyword" 
          placeholder="搜索展览名称..."
          @input="onSearch"
        />
        <view class="search-icon">🔍</view>
      </view>
      
      <view class="exhibition-list">
        <view 
          v-for="record in filteredRecords" 
          :key="record.recordId"
          class="exhibition-item"
          :class="{ selected: selectedRecordId === record.recordId }"
          @click="selectRecord(record)"
        >
          <image 
            :src="record.coverImageUrl || '/static/logo.png'" 
            class="exhibition-cover"
            mode="aspectFill"
          />
          <view class="exhibition-info">
            <text class="exhibition-title">{{ record.title }}</text>
            <text class="exhibition-gallery">{{ record.galleryName }}</text>
            <text class="exhibition-date">{{ formatDate(record.exhibitionDate) }}</text>
          </view>
          <view v-if="selectedRecordId === record.recordId" class="selected-icon">✓</view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="filteredRecords.length === 0" class="empty-state">
          <text class="empty-text">暂无展览记录</text>
          <text class="empty-hint">请先创建展览，然后返回选择</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button 
        class="cancel-btn" 
        @click="onCancel"
      >
        取消
      </button>
      <button 
        class="confirm-btn" 
        :disabled="!canConfirm"
        @click="onConfirm"
      >
        选择展览
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getRecordList, createRecord } from '@/services/api/backendApi'

// 组件属性
const props = defineProps({
  // 是否显示组件
  visible: {
    type: Boolean,
    default: false
  }
})

// 组件事件
const emit = defineEmits(['confirm', 'cancel'])

// 响应式数据
const searchKeyword = ref('')
const selectedRecordId = ref('')
const records = ref([])
const loading = ref(false)

// 计算属性
const filteredRecords = computed(() => {
  if (!searchKeyword.value) {
    return records.value
  }
  return records.value.filter(record => 
    record.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    record.galleryName.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

const canConfirm = computed(() => {
  return selectedRecordId.value !== ''
})

// 方法

const loadRecords = async () => {
  try {
    loading.value = true
    const result = await getRecordList(0, 50) // 加载前50条记录
    records.value = result.records || []
  } catch (error) {
    console.error('加载展览列表失败:', error)
    
    // 如果API未实现（404错误），显示提示并允许用户直接创建新展览
    if (error.message && error.message.includes('404')) {
      console.log('展览列表API未实现，显示空状态')
      records.value = []
      uni.showToast({
        title: '展览功能开发中，请直接创建新展览',
        icon: 'none',
        duration: 3000
      })
    } else {
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      })
    }
  } finally {
    loading.value = false
  }
}

const onSearch = () => {
  // 搜索逻辑已在computed中处理
}

const selectRecord = (record) => {
  selectedRecordId.value = record.recordId
}

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

const onCancel = () => {
  emit('cancel')
}

const onConfirm = () => {
  const selectedRecord = records.value.find(r => r.recordId === selectedRecordId.value)
  if (selectedRecord) {
    emit('confirm', { type: 'select', record: selectedRecord })
  }
}

// 生命周期
onMounted(async () => {
  await loadRecords()
})
</script>

<style lang="scss" scoped>
.exhibition-selector {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


.select-mode {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.search-bar {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 14px;
  background: #f9f9f9;
  box-sizing: border-box;
  
  &:focus {
    border-color: #d4af37;
    background: #fff;
  }
}

.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
}

.exhibition-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.exhibition-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #f9f9f9;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  
  &:hover {
    border-color: #d4af37;
    background: #fff;
  }
  
  &.selected {
    border-color: #d4af37;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 228, 188, 0.1));
  }
}

.exhibition-cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 15px;
  object-fit: cover;
}

.exhibition-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.exhibition-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.exhibition-gallery {
  font-size: 14px;
  color: #666;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.exhibition-date {
  font-size: 12px;
  color: #999;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.selected-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #d4af37;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-text {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.empty-hint {
  display: block;
  font-size: 14px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}


.action-buttons {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 45px;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  
  &:hover {
    background: #e0e0e0;
  }
}

.confirm-btn {
  background: linear-gradient(135deg, #d4af37, #f4e4bc);
  color: #8b4513;
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #c19b26, #e6d4a8);
  }
  
  &:disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
  }
}
</style>
